<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Face Info.</title>
        <link href="../css/default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
    </head>   
    <body>
        <div id="wrapper">
        <jsp:include page="../include/header.jsp" />
            <!-- end div#header -->
            <div id="page">
                <div id="content">
                    <div id="welcome">
                        <!-- Fetch Rows -->
                        <table class="aatable">
                            <tr>
                                <th>Face UID</th>
                                <th>User Info</th>
                                <th>Operation</th>
                            </tr>
                            <tbody id="tableContent"></tbody>
                            </table>
                    </div>
                    <!-- end div#welcome -->
                </div>
                <!-- end div#content -->
                <div id="sidebar">
                    <!--ul-->
                        <%	if("Y".equals((String)request.getSession().getAttribute("isadmin"))){%>
                    	<jsp:include page="../include/adminnav.jsp"/>
                    	<%} else { %>
                    	<jsp:include page="../include/usernav.jsp"/>
                    	<%} %>
                        <!-- end navigation -->
                        <jsp:include page="../include/updates.jsp"/>
                    <!--/ul-->
                </div>
                <!-- end div#sidebar -->
                <div style="clear: both; height: 1px"></div>
            </div>
            <jsp:include page="../include/footer.jsp" />
        </div>
        <!-- end div#wrapper -->
    </body>
	<script type="text/javascript">
$(document).ready(function(){
	debugger;
	listAllFaces();
});
	
function generateDataRows(data){
	var tableStr;
	$.each(data, function(i, item) {
		tableStr += "<tr id='datarow"+i+"'>" +
		"<td>" + item.faceUid + "</td>" +
		"<td>" + item.fullName + "</td>" +		
		"<td><input type='button' value='Delete' onclick='deleteFace(\""+item.faceUid + "\")'/></td>"+"</tr>";
	});
	
	$("#tableContent").html(tableStr);
}
		
function listAllFaces(){
	var myurl ="../facade/listAllFacesFacade";
	$.ajax({
		type: "post",
		url: myurl,
		dataType: 'json',
		success: function(data, textStatus) {
			if (data.success) {
				generateDataRows(data.data);
			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
}
	
function deleteFace(uid){
	alert(uid);
	$.ajax({
		type: "post",
		url: "../facade/deleteFaceFacade",
		data: {
			faceUid:uid
		},
		dataType: 'json',
		success: function(data, textStatus) {
			if (data.success) listAllFaces();
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
}
</script>
</html>
